<template>
  <div>
    <el-form-item label="是否必填">
      <el-switch v-model="_value.required"></el-switch>
    </el-form-item>
    <el-form-item label="必填校验提示" v-show="_value.required">
      <el-input v-model="_value.validateFailMessage" placeholder="必填校验提示" />
    </el-form-item>

    <el-form-item label="日期格式">
      <el-select v-model="_value.format">
        <el-option value="YYYY-MM-DD" label="年-月-日"></el-option>
        <el-option value="YYYY-MM-DD HH:mm" label="年-月-日 时:分"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="默认值">
      <el-date-picker
        v-model="_value.defaultValue"
        :type="formatType"
        :format="_value.format"
        :value-format="_value.format"
        date-format="YYYY-MM-DD"
        :time-format="_value.format === 'YYYY-MM-DD HH:mm' ? 'HH:mm' : ''"
        placeholder="选择日期"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="描述信息">
      <el-switch v-model="_value.showDescription"></el-switch>
    </el-form-item>
    <el-form-item v-show="_value.showDescription">
      <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="_value.description" placeholder="请输入描述信息" />
    </el-form-item>
    <el-form-item label="是否可清空">
      <el-switch v-model="_value.clearable"></el-switch>
    </el-form-item>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(["update:modelValue"]);
const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const formatType = computed(() => {
  switch (_value.value.format) {
    case "YYYY":
      return "year";
    case "YYYY-MM":
      return "month";
    case "YYYY-MM-DD":
      return "date";
    case "YYYY-MM-DD HH:mm":
      return "datetime";
    default:
      return "datetime";
  }
});
</script>

<style scoped></style>
